<template>
    <div class="w-[400px] mx-auto">
        <div class="w-full">是否进行以下操作？操作后不可撤销。</div>
        <div class="flex justify-center items-center my-2">
            <div class="flex flex-col items-center">
                <div class="w-[100px] h-[100px] transparent-background rounded p-2">
                    <img
                        @load="handleSourceImageLoad"
                        ref="sourceImageRef"
                        :src="sourceImage"
                        alt=""
                        class="w-full h-full object-contain"
                    />
                </div>
                <div>{{ sourceName }}</div>
                <div v-if="sourceSize">{{ sourceSize?.width }} x {{ sourceSize?.height }}</div>
            </div>
            <div class="mx-8">{{ targetFileItem?.isDir ? '复制到' : '覆盖>>' }}</div>
            <div class="flex flex-col items-center">
                <div class="w-[100px] h-[100px] transparent-background rounded p-2">
                    <img
                        @load="handleTargetImageLoad"
                        ref="targetImageRef"
                        :src="targetImage"
                        alt=""
                        class="w-full h-full object-contain"
                    />
                </div>
                <div>{{ targetName }}</div>
                <div v-if="targetSize">{{ targetSize?.width }} x {{ targetSize?.height }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Info } from '@/appUtils/appData/lanhuTypes'
import { IFileItem, stats } from '@/appUtils/fs'
import fileExtensions from '@/components/FileExplorer/components/fileExtensions.json'

import { ref, watch } from 'vue'

const props = defineProps<{
    source: Info | IFileItem
    target: string
}>()

const targetFileItem = ref<IFileItem | undefined>(undefined)
const sourceImage = ref<string | undefined>(undefined)
const sourceName = ref('')
const targetImage = ref('')
const targetName = ref('')
const targetSize = ref<{ width: number; height: number } | undefined>(undefined)
const sourceSize = ref<{ width?: number; height?: number } | undefined>(undefined)

const handleSourceImageLoad = (e: Event) => {
    if (isFileItem(props.source) && !isImage(props.source)) return
    if (!(e.target instanceof HTMLImageElement)) return
    if (isFileItem(props.source)) {
        const { naturalWidth, naturalHeight } = e.target
        sourceSize.value = { width: naturalWidth, height: naturalHeight }
    } else {
        const { naturalWidth, naturalHeight } = props.source
        sourceSize.value = { width: naturalWidth, height: naturalHeight }
    }
}

const handleTargetImageLoad = (e: Event) => {
    if (!isImage(targetFileItem.value)) return
    if (!(e.target instanceof HTMLImageElement)) return
    const { naturalWidth, naturalHeight } = e.target
    targetSize.value = { width: naturalWidth, height: naturalHeight }
}

/** 判断是否是文件项 */
const isFileItem = (obj: any): obj is IFileItem => {
    if ('path' in obj && ('isFile' in obj || 'isDir' in obj)) {
        return true
    }
    return false
}

/** 判断是否是图片 */
const isImage = (fileItem?: IFileItem) => {
    if (!fileItem) return false
    return fileExtensions[fileItem.ext as keyof typeof fileExtensions] === 'image'
}

const getFileImage = (fileItem: IFileItem) => {
    if (fileItem.isDir) {
        return './file-icons/folder.svg'
    } else if (isImage(fileItem)) {
        return `file://${fileItem.path}?t=${Date.now()}`
    }
    return `./file-icons/${fileExtensions[fileItem.ext as keyof typeof fileExtensions]}.svg`
}

watch(
    () => props.source,
    async () => {
        const source = props.source
        sourceName.value = source.name
        if (isFileItem(source)) {
            sourceImage.value = getFileImage(source)
        } else {
            sourceImage.value = source?.image?.imageUrl
        }
    },
    {
        immediate: true
    }
)
watch(
    () => props.target,
    async (newValue) => {
        const stat = await stats(newValue)
        targetFileItem.value = stat
        targetImage.value = getFileImage(stat)
        targetName.value = stat.name
    },
    {
        immediate: true
    }
)
</script>

<style scoped></style>
